<template>
  <div id="footer">
    <el-footer
      style="color: #333; font-size: 15px; border-top: 1px solid #e6e6e6"
    >
      <ul style="padding-bottom: 5px; text-align: center">
        <li
          v-for="(item, index) in footeritem"
          :key="index"
          style="display: inline-block; height: 20px; line-height: 20px"
        >
          {{ item }}
          <em
            style="
              background: #ccc;
              display: inline-block;
              font-size: 0;
              height: 10px;
              margin: 0 10px;
              overflow: hidden;
              text-indent: -9999px;
              vertical-align: -1px;
              width: 1px;
            "
            >|</em
          >
        </li>
        <li style="display: inline-block; height: 20px; line-height: 20px">
          百度
        </li>
      </ul>
    </el-footer>
  </div>
</template>


<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      footeritem: [
        "关于",
        "联系我们",
        "用户协议",
        "最新问答",
        "最新房源",
        "放心搜",
        "推广服务",
        "招商",
        "友情链接",
        "其他城市",
      ],
    };
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>